<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This is chat room</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
<body>

<table style="width:800px">
<tr><td id="usernamelist" style="width:100px;"></td>
<td id="message"></td>
</tr>
<tr><td colspan="2"> 
<span id="logout" onclick="logout()" >Logout</span><br>
<textarea rows="10" cols="50" id="chat"></textarea>
<button onclick="sendChat()">Send</button>
</td></tr>
</table>
</body>
</html>
<script type="text/javascript">
	$(document).ready(function(){
		//get username list
		getUsernameList();
		//get message list
		getMessage();
	});
	function getUsernameList(){
		$.get("UsernameListServlet",function(data){
			var users =data.split(",")
			var dom ="";
			dom=users.join("<br>");
			$("#usernamelist").html(dom);
		},"text");
	}
	function getMessage(){
		$.get("ChatMessageServlet",function(data){
			var messages=data.split("||");
			var dom =messages.join("<br>");
			$("#message").html(dom);
		},"text");
	}
	function logout(){
		window.location="index.jsp";
	}
	function sendChat(){
		var u =$.cookie("loginuser");
		var content =$("#chat").val();
		$.get("SendChatServlet","message="+u+":"+content,function(data){
			$("#chat").val("");
			$("#message").html($("#message").html()+"<br>"+u+":"+content+"<br>");
		})
	}
	function doall(){
		getUsernameList();
		
		getMessage();
	}
	setInterval(doall, 5000);
</script>